<template>
    <div class="yetpay">
        <!-- 待付款 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="订单号" width="250" align="center">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderNumber }}</span>
            </template>
        </el-table-column>
        <el-table-column label="下单时间" width="250" align="center">
            <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px" v-time=scope.row.orderTime>{{ scope.row.orderTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品图片"  align="center" width="300">
            <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderFormDetails" :key="index" style="margin:20px 0px">
                    <img style="" width="130px" height="130px" :src="item.commodityImg[0]" alt="">
                </div>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
            <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderFormDetails" :key="index" style="margin:80px 0px">
                    <span>{{item.commodityTitle}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="300" align="center">
            <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderFormDetails" :key="index" style="margin:80px 0px">
                    <span>待付款</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">提醒付款</el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    props:["tableData"],
    data() {
        return {
        };
    },
    methods: {
        handleEdit(index, row) {
        console.log(index, row);
        }
    }
}
</script>
<style lang="scss" scoped>
    .yetpay{
        padding:4px;  
    }
</style>